<template>
	<u-popup v-model="show" mode="center" borderRadius="30">
		<view class="pop-content">
			<!-- <view class="top-close" @click="close"><u-icon name="close-circle" size="36" color="#666666"></u-icon></view> -->
			<text class="title">{{ title }}</text>
			<view class="con items-center" v-if="text">
				<text class="text">{{ text }}</text>
			</view>
			<view class="btn-group flex-row b-t">
				<view class="btn-modal" @click="close" v-if="showCancle">
					<text>{{ cancelText }}</text>
				</view>
				<view class="btn-modal b-l" @click="confirm">
					<text :style="{ color: confirmColor }">{{ confirmText }}</text>
				</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
/**
 * 确认对话框
 * @prop title 标题
 * @prop text 提示内容
 * @prop cancelText 取消按钮文字
 * @prop confirmText 确认按钮文字
 * @event onConfirm 确认按钮点击时触发
 */
export default {
	data() {
		return {
			show:false
		};
	},
	props: {
		title: String,
		text: String,
		showCancle: {
			type: Boolean,
			default: true
		},
		cancelText: {
			type: String,
			default: '取消'
		},
		confirmText: {
			type: String,
			default: '确定'
		},
		confirmColor: {
			type: String,
			default: '#000000'
		}
	},
	methods: {
		confirm() {
			this.$emit('onConfirm');
			this.close();
		},
		open() {
			this.show=true;
		},
		close() {
			this.show=false;
		}
	}
};
</script>

<style scoped lang="scss">
.top-close {
	position: absolute;
	top: 20rpx;
	right: 20rpx;
}
.pop-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 540rpx;
	padding-top: 36rpx;
	background-color: #fff;
	border-radius: 24rpx;
	overflow: hidden;
	position: relative;

	.title {
		font-size: 32rpx;
		color: #333;
		line-height: 48rpx;
		font-weight: 700;
	}
	.con {
		padding: 36rpx 40rpx 20rpx;
	}
	.text {
		width: 460rpx;
		font-size: 26rpx;
		color: #333;
		line-height: 40rpx;
		text-align: center;
	}
	.btn-group {
		width: 100%;
	}
	.btn-modal {
		flex: 1;
		height: 88rpx;
		line-height: 88rpx;
		font-size: 32rpx;
		color: #777;
		text-align: center;
	}
}
</style>
